<template>
	<view class="search-result">
		<!-- 自定义导航栏 -->
		<headerNav />
		
		<!-- tab 选项 -->
		<view class="pf-sticky">
			<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
		</view>
		
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper :current="currentTab"  duration="300" @change="swiperTab" style="height: 100%;">
			<swiper-item v-for="(tabitem,tabindex) in tabTitle" :key="tabitem.id" class="swipers" style="height: 100%;">
				<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true" @scrolltolower="addRandomData">
					<!-- 瀑布流 list列表 -->
					<view class="wrap">
						<u-waterfall :flowList="flowList" ref="uWaterfall">
							<template v-slot:left="{leftList}">
								<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
									<template v-if="item.image">
										<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
										<!-- #ifndef MP-WEIXIN -->
										<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<view class="demo-img-wrap">
											<image class="demo-image" :src="item.image" mode="widthFix"></image>
										</view>
										<!-- #endif -->
										<view class="demo-title twoEllipsis">{{item.title}}</view>
										<view class="u-f u-f-sbc">
											<view class="u-f u-f-ac d-p-left">
												<text>评论</text>
												<text>{{item.price}}+</text>
											</view>
											<view class="u-f u-f-ac d-p-right">
												<text>1.2w</text>
												<image src="/static/search/look_icon.png"></image>
											</view>
										</view>
									</template>
									<template v-else>
										<view class="demo-img-wrap">
											<view class="no-img-t1">这个是没有图--标题:{{item.title}}</view>
											<view class="no-img-t2">
												<view class="u-f u-f-sbc">
													<view class="u-f u-f-ac d-p-left">
														<text>评论</text>
														<text>{{item.price}}+</text>
													</view>
													<view class="u-f u-f-ac d-p-right">
														<text>1.2w</text>
														<image src="/static/search/look_icon.png"></image>
													</view>
												</view>
												<view class="d-t-comment">显示一条最新的评论这个内容不错哦！</view>
											</view>
										</view>
									</template>
								</view>
							</template>
							<template v-slot:right="{rightList}">
								<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
									<template v-if="item.image">
										<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
										<!-- #ifndef MP-WEIXIN -->
										<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
										<!-- #endif -->
										<!-- #ifdef MP-WEIXIN -->
										<view class="demo-img-wrap">
											<image class="demo-image" :src="item.image" mode="widthFix"></image>
										</view>
										<!-- #endif -->
										<view class="demo-title twoEllipsis">{{item.title}}</view>
										<view class="u-f u-f-sbc">
											<view class="u-f u-f-ac d-p-left">
												<text>评论</text>
												<text>{{item.price}}+</text>
											</view>
											<view class="u-f u-f-ac d-p-right">
												<text>1.2w</text>
												<image src="/static/search/look_icon.png"></image>
											</view>
										</view>
									</template>
									<template v-else>
										<view class="demo-img-wrap">
											<view class="no-img-t1">这个是没有图--标题:{{item.title}}</view>
											<view class="no-img-t2">
												<view class="u-f u-f-sbc">
													<view class="u-f u-f-ac d-p-left">
														<text>评论</text>
														<text>{{item.price}}+</text>
													</view>
													<view class="u-f u-f-ac d-p-right">
														<text>1.2w</text>
														<image src="/static/search/look_icon.png"></image>
													</view>
												</view>
												<view class="d-t-comment">显示一条最新的评论这个内容不错哦！</view>
											</view>
										</view>
									</template>
								</view>
							</template>
						</u-waterfall>
						<!-- 官方提供的下拉加载 需要优化下 -->
						<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
					</view>
				
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import navTab from '@/common/components/tabs/navTab.vue';
	import headerNav from '@/common/components/headerNav/headerNav.vue';
	export default {
		data() {
			return {
				// tab 导航相关
				tabTitle: ['武术', '太极','其它','风景','分类名称'], //导航栏格式
				currentTab:0,	//sweiper所在页
				
				// 瀑布流相关
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					{
						price: 35,
						title: '北国风光，千里冰封，万里雪飘',
						shop: '李白杜甫白居易旗舰店',
						// image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
						image: '',
					},
					{
						price: 75,
						title: '望长城内外，惟余莽莽',
						shop: '李白杜甫白居易旗舰店',
						// image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg',
						image: '',
					},
					{
						price: 385,
						title: '大河上下，顿失滔滔',
						shop: '李白杜甫白居易旗舰店',
						// image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
						image: '',
					},
					{
						price: 784,
						title: '欲与天公试比高',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg',
					},
					{
						price: 7891,
						title: '须晴日，看红装素裹，分外妖娆',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg',
					},
					{
						price: 2341,
						shop: '李白杜甫白居易旗舰店',
						title: '江山如此多娇，引无数英雄竞折腰',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg',
					},
					{
						price: 661,
						shop: '李白杜甫白居易旗舰店',
						title: '惜秦皇汉武，略输文采',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg',
					},
					{
						price: 1654,
						title: '唐宗宋祖，稍逊风骚',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 1678,
						title: '一代天骄，成吉思汗',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 924,
						title: '只识弯弓射大雕只识弯弓射大雕只识弯弓射大弓射大雕',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
					{
						price: 8243,
						title: '俱往矣，数风流人物，还看今朝',
						shop: '李白杜甫白居易旗舰店',
						image: 'http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg',
					},
				]
				
			}
		},
		components: {
			navTab,headerNav
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			//点击切换
			changeTab(index) {
				this.currentTab = index
			},
			//swiper 切换
			swiperTab(e) {
				this.currentTab = e.target.current;
				if (this.tabTitle.length <= 5) {
					this.$refs.navTab.navClick(this.currentTab)
				} else {
					this.$refs.navTab.longClick(this.currentTab)
				}
			},
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			}
			
		}
	}
</script>

<style lang="scss">
page {
	height: 100%;
}
.pf-sticky{
	position: sticky;
	top: 0;z-index: 999;
	background-color: #ffffff;
}
.search-result{
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 100%;
}
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}
.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}
.demo-image {
	width: 100%;
	border-radius: 4px;
}
.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
	margin-bottom: 20upx;
}
// 自定义的
.d-p-left>text:first-of-type{
	font-size: 12px;
	color: #333333;
	margin-right: 20upx;
}
.d-p-left>text:last-of-type{
	font-weight: bold;
	font-size: 13px;
	color: #9D2800;
}
.d-p-right>text{
	font-size: 12px;
	color: #333333;
	margin-right: 20upx;
}
.d-p-right>image{
	width: 18px;
	height: 18px;
}
.demo-img-wrap{
	min-height: 336upx;
	background-color: #E8E8E8;
	border-radius: 4px;
	position: relative;
	padding: 10upx 16upx;
	font-size: 13px;
	color: #333333;
}
.no-img-t1{
	margin-bottom: 30upx;
}
.no-img-t2{
	position: absolute;
	bottom: 26upx;
	padding: 10upx 16upx 0 0;
}
.d-t-comment{
	margin-top: 16upx;
}
</style>
